<!-- 文件上传 -->
<template>
    <el-upload class="single" action="#" :accept="getFileType()" :show-file-list="false" :on-change="(file, fileList) => {uploadChange(file, fileType, componentType)}" :http-request="defaultUp">
        <div v-show="buttonStyle == 'icon'">
            <div class="insert">
                <img draggable="false" :src="imgUrl()" :style="{ width: width != null ? width : null, height: height != null ? height : null }" />
            </div>
        </div>
        <div v-show="buttonStyle == 'button'">
            <el-button type="primary" class="single" :style="{ width: width != null ? width : null, height: height != null ? height : null }">上传</el-button>
        </div>
    </el-upload>
</template>

<script>
import upload from '@/js/util/upload.js';
import util from '@/js/util/util.js';
import template from '@/js/element/template.js';
import store from '@/js/store/state.js';
import picture from '@/js/element/picture.js';
import video from '@/js/element/video.js';
import system from '@/js/main/system.js';
import message from '@/js/util/message.js';
import history from '@/js/main/history.js';
import addIcon from '../../../src/image/main/toolbar/canvas_plus.svg';
import pictureIcon from '../../../src/image/main/toolbar/icon_img.svg';
import register from '@/js/main/register.js';

export default {
    props: {
        fileType: {
            require: true,
            type: String
        },
        componentType: {
            require: true,
            type: String
        },
        buttonStyle: {
            require: true,
            type: String
        },
        width: {
            require: false,
            default: null,
            type: String
        },
        height: {
            require: false,
            default: null,
            type: String
        },
        img: {
            require: false,
            type: String
        }
    },
    data() {
        return {
            window: window
        };
    },
    mounted() {
        this.imgUrl();
    },
    methods: {
        imgUrl() {
            return this.img ? pictureIcon : addIcon;
        },
        getFileType() {
            if (this.fileType === '01') {
                return '.gif,.bmp,.jpg,.jpeg,.png,.svg';
            } else if (this.fileType === '02') {
                return '.mp4';
            }
        },
        defaultUp() {},
        uploadChange(file, type, componentType) {
            let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1).toLocaleLowerCase();
            if (type === '01') {
                if ('.gif,.bmp,.jpg,.jpeg,.png,.svg'.indexOf(testmsg) === -1) {
                    this.$emit('errorFun');
                    return false;
                }
            } else if (type === '02') {
                if ('.mp4'.indexOf(testmsg) === -1) {
                    this.$emit('errorFun');
                    return false;
                }
            }
            let _this = this;
            let errorFun = function(fileUp) {
                // message.message('上传失败', 'error');
                _this.$emit('errorFun');
            }
            let successFun = function(fileUp) {
                message.message('上传成功', 'success');
                let width = 200;
                let height = util.toInteger((fileUp.response.body.message.imageheight * width) / fileUp.response.body.message.imagewidth);
                if (fileUp.createImageFun.fileType === '01') {
                    let mediaTemplate = util.clone(picture);
                    mediaTemplate.id = fileUp.response.body.message.id;
                    mediaTemplate.data.push({
                        url: `${fileUp.response.body.message.file}`,
                        id: fileUp.response.body.message.id,
                        preview: `${fileUp.response.body.message.preview}`,
                        width: width,
                        height: height
                    });
                    template.resetResourceList(['01']);
                    if (componentType === 'PicLoop') {
                        fileUp.createImageFun.element[0].data.splice(fileUp.createImageFun.element[0].data.length, 0, mediaTemplate.data[0]);
                        history.addHistory(store.clone(), 35);
                    } else {
                        store.addElement(mediaTemplate);
                        history.addHistory(store.clone(), 15);
                    }
                } else if (fileUp.createImageFun.fileType === '02') {
                    let mediaTemplate = util.clone(video);
                    mediaTemplate.id = fileUp.response.body.message.id;
                    mediaTemplate.data.push({
                        url: `${fileUp.response.body.message.file}`,
                        id: fileUp.response.body.message.id,
                        preview: `${fileUp.response.body.message.preview}`,
                        width: width,
                        height: height
                    });
                    template.resetResourceList(['02']);
                    if (componentType === 'upload') {
                        fileUp.createImageFun.element[0].data.splice(0, 1);
                        fileUp.createImageFun.element[0].data.splice(fileUp.createImageFun.element[0].data.length, 0, mediaTemplate.data[0]);
                        register.redraw(system.SYSTEM_EDIT_ELEMENT + fileUp.createImageFun.element[0].id);
                        history.addHistory(store.clone(), 36);
                    } else {
                        store.addElement(mediaTemplate);
                        history.addHistory(store.clone(), 15);
                    }
                }
            };
            successFun.fileType = type;
            successFun.element = store.getCurrentElementList();
            upload.addFile(file.raw, 10, '', successFun, errorFun);
        }
    }
};
</script>
<style lang="scss" scoped>
.uploadpanel {
    width: 100%;
    height: 100%;
    text-align: center;
}
.insert {
    width: 100%;
    height: 100%;
}
</style>